<template>
   <!-- <div class="EchartPractice"> -->
     <div style="height: 100%">
       <h1 class="home_title">
         <el-button
           type="success"
           icon="el-icon-arrow-left"
           @click="getPreYearDate"
           >上一年</el-button
         >&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ year }}</span
         ><span>学员数量</span>&nbsp;&nbsp;&nbsp;&nbsp;
         <el-button
           type="success"
           @click="getNextYearDate"
           >下一年<i class="el-icon-arrow-right"></i
         ></el-button>
       </h1>
       <div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
     </div>
     <!-- <div id="main"></div> -->
   <!-- </div> -->
 </template>
 
 <script>
 import studentApi from "@/api/student";
 export default {
   data() {
     return {
       year: new Date().getFullYear(),
     };
   },
 
   components: {},
   mounted() {
     this.getChars();
   },
   methods: { 
     getPreYearDate() {
       this.year--;
       this.getChars();
     },
 
     getNextYearDate() {
       this.year++;
       this.getChars();
     },
     getChars() {
       studentApi.getstudentListForMonth(this.year).then((response) => {
         const resp = response.data;
         if (resp.status == 0) {
           var chartDom = document.getElementById("myChart");
           var myChart = this.$echarts.init(chartDom);
           var option;
           let dataArr = [0];
           if (resp.data && resp.data.length) {
             resp.data.forEach((item) => {
               dataArr[item._id - 1] = item.count;
             });
           } else {
             this.$message({
               message: "当年年份无数据",
               type: "warning",
               duration: 5000,
             });
           }
           option = {
             xAxis: {
               type: "category",
               data: [
                 "Jan",
                 "Feb",
                 "Mar",
                 "Apr",
                 "May",
                 "Jun",
                 "Jul",
                 "Aug",
                 "Sep",
                 "Oct",
                 "Nov",
                 "Dec",
               ],
             },
             yAxis: {
               type: "value",
             },
             series: [
               {
                 data: dataArr,
                 type: "bar",
               },
             ],
           };
           option && myChart.setOption(option);
         }
       });
     },
   },
 };
 </script>
 
 <style scoped>
 /* #main {
   width: 600px;
   height: 400px;
   margin: auto;
   margin-top: 100px;
 } */
 .home_title {
   text-align: center;
 }
 .home_title span {
   vertical-align: bottom;
 }
 </style>